<template>

  <div>
    <ul>
      <li v-for="(item,index) in list.arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="add">添加</button>
    <button @click="remove"> 删除</button>
    <span>{{ refData }}</span>
    <h3>名字:{{ form.name }}</h3>
    <h3>年龄:{{ form.age }}</h3>
    <form action="get">
      <input v-model="form.name" type="text"><br/>
      <input v-model="form.age"  type="text">
      <button @click.prevent="submit">提交</button>
    </form>
    <to @on-click="getList"></to>
  </div>

</template>

<script setup lang='ts'>
import { ref,reactive,readonly,shallowReactive } from 'vue'
//引入to组件
import to from './to.vue';
//ref支持所有类型 reactive只支持引用类型 Array Object Map Set  
//ref取值 赋值需要.value   reactive不行.value   <number[]> 代办数组的数字类型·  shallowReactive只能更改引入类型浅层的 深层的不行·
let dem = reactive<number[]>([1,2,4])
let refData = ref(1)

//手动推断类型
type M = {
  name:string,
  age:number
}
// <M> 泛型
let form = reactive<M>({
  name:'柳俊',
  age:23
})
const submit=()=>{
  console.log(form);
}
//添加数组
const add = ()=>{
 list.arr =['JDG','MUN']
}
//删除数组
const remove =()=>{
  dem.splice(0,1)
}

let list = reactive<{
  arr:string[],
  num:number
}>({
  arr:['EDG','STK'],
  num:2
})

const getList = (val:any)=>{
  console.log(val.value,'1232');
  
}
// let read = readonly(list)
// read.arr = ['1']
</script>
<style scoped>

</style>